<template>
	<view class="initCab">
		<view class="selErWei">{{titleName}} :</view>
		<picker 
			@change="bindPickerChange" 
			@tap="isActive = true" 
			@cancel="isActive = false" 
			:value="select_index" 
			:range="array" 
			range-key="name"
		>
			<view v-if="array.length>0" class="selCart" :class="isActive ? 'focusstyle':''">{{array[select_index].name}}</view>
		</picker>
	</view>	
</template>

<script>
	export default{
		props:{
			array:{
				type:Array
			},
			titleName:{
				type:String
			},
			index:{
				type:Number
			}
		},
		data(){
			return {
				isActive:false,
				select_index:this.index
			}
		},
		updated() {
			console.log("updated")
			//默认选中样式 
			// this.select_index = this.index-1;
		},
		methods:{
			bindPickerChange(e) {
				console.log('1232');
				console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.isActive = false
				this.select_index = e.target.value
			}
		}
	}
</script>

<style scoped lang="less">
	.initCab{
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		// height: 140rpx;
		// width: 27.44vw;
		width: 45.44vw;
		height: 7.5vh;
		margin: 0 auto;
		// margin-bottom: 30rpx;
		margin-bottom: 1.97vh;
		// padding-bottom: 18px;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	.selErWei{
		color: #777777;
		font-size: 34rpx;
		width: 165rpx;
		text-align: center;
		// padding: 16px 0 12px 15px;
		// box-sizing: border-box;
		// margin: 0 10rpx 0 34rpx;
	}
	.selCart{
		// width: 584rpx;
		// height: 88rpx;
		width: 20.25vw;
		height: 5.7vh;
		// line-height: 80rpx;
		line-height: 5.5vh;
		background: #FFFFFF;
		border: 4rpx solid #CCCCCC;
		border-radius: 20rpx;
		font-size: 36rpx;
		padding-left: 60rpx;
		color: #222222db;
		box-sizing: border-box;
	}
	.focusstyle {
		border: 4rpx solid #4F9AFF !important;
	}
</style>
